<template>
  <div>
    <section>
      <div class="box-top" v-show="flag1">
        <h4>最近搜索</h4>
        <div class="delete" @click="del"></div>
      </div>
      <div v-show="flag1">
        <ul>
          <li v-for="(v, index) in lists" :key="index">{{ v }}</li>
        </ul>
      </div>
      <div class="box-top">
        <h4>热门搜索</h4>
        <span v-if="flag" @click="funn">隐藏</span
        ><span v-if="!flag" @click="funn">显示</span>
      </div>
      <div class="box-bottom" v-show="flag">
        <ul>
          <li v-for="(v, index) in list" :key="index">{{ v.keyword }}</li>
        </ul>
      </div>
      <div v-show="!flag" class="none">已隐藏搜索发现</div>
    </section>
  </div>
</template>

<script>
import { Dialog } from "vant";

// Dialog({ message: "提示" });
export default {
  data() {
    return {
      list: [
      ],
      flag: true,
      flag1: false,
      lists: [],

    };
  },
  methods: {
    funn() {
      this.flag = !this.flag;
    },
    del() {
      Dialog.confirm({
        title: "",
        message: "确定要清空吗",
        confirmButtonColor: "#f00",
        confirmButtonText: "确定",
      })
        .then(() => {
          // on confirm
          this.lists = [];
          this.flag1 = !this.flag1
          this.$bus.$emit('none',this.lists)
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  mounted() {
    this.$http({
      url: "api/pro/hotword", // 设置请求的地址
      method: "GET", // 设置请求方法
    }).then((res) => {
      // res为后端返回的数据
      // console.log(res.data.data[0])
      res.data.data.forEach(element => {
        this.list.push(element)
        // console.log(this.arr)
      });
    });
    this.$bus.$on("aMsg",  (value)=> {
      this.lists = value;
      this.lists = Array.from(new Set(this.lists))
      // that.$nextTick(() => {
      if (this.lists.length == 0) {
        this.flag1 = false;
      } else {
        this.flag1 = true;

      }
      // });

      // console.log(value)
    });
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
section {
  width: 100vw;
  height: 34.1333vw;
  background: #fff;
  padding: 2.6667vw;
  box-sizing: border-box;
}
.box-top {
  /* display: flex;
    justify-content: space-between; */
  position: relative;
}
h4 {
  font-weight: normal;
}
.delete {
  background: url("//st.360buyimg.com/so/images/layout/search-sprites.png")
    no-repeat;
  background-position: 0 -35px;
  height: 15px;
  width: 15px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-size: 50px 50px;
}
span {
  color: #999;
  position: absolute;
  bottom: 0;
  right: 0;
}
ul {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}
.box-bottom ul > li:nth-child(1) {
  background: #f00;
  /* font-size: 3.2vw;
    padding: 0 4vw;
    border-radius: 1.0667vw;
    margin:2vw 0;
    color: #f00; */
}
li {
  background: #eee;
  font-size: 3.2vw;
  color: #666;
  padding: 0 4vw;
  border-radius: 1.0667vw;
  margin: 2vw 2vw;
}
.none {
  font-size: 3.2vw;
  color: #666;
  text-align: center;
  margin-top: 8vw;
}
</style>